<template>
  <el-dialog
    v-model="visible"
    :title="$t('order.modifyOrderAmount')"
    :close-on-click-modal="false"
    width="80%"
    class="components-amount-update"
  >
    <div class="mod-order-orderInfo">
      <el-alert
        :title="$t('order.modificatioAmount')"
        type="warning"
        show-icon
      />
      <div class="main">
        <div class="content">
          <div class="prod-tit">
            <el-row style="width:100%">
              <el-col :span="20">
                <el-row style="width:100%">
                  <el-col
                    :span="10"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.product") }}</span>
                  </el-col>
                  <el-col
                    :span="2"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.unitPrice") }}</span>
                  </el-col>
                  <el-col
                    :span="2"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.quantity") }}</span>
                  </el-col>
                  <el-col
                    :span="2"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.totalPrice") }}</span>
                  </el-col>
                  <el-col
                    :span="3"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.userPayunt") }}</span>
                  </el-col>
                  <el-col
                    :span="5"
                    header-align="center"
                    align="center"
                  >
                    <span class="item">{{ $t("order.userPayunt") }}</span>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-col
                  header-align="center"
                  align="center"
                >
                  <span class="item product">{{ $t("order.shippingAmunt") }}</span>
                </el-col>
              </el-col>
            </el-row>
          </div>
          <div class="prod">
            <div class="prod-cont prod-bottom">
              <el-row style="width:100%">
                <el-col :span="20">
                  <el-col
                    v-for="(orderItem,index) in dataList"
                    :key="index"
                    class="prod"
                  >
                    <el-col class="prod-cont">
                      <el-row style="width:100%">
                        <el-col
                          :span="10"
                        >
                          <div class="item">
                            <span>{{ orderItem.prodName }}</span>
                          </div>
                        </el-col>
                        <el-col
                          :span="2"
                        >
                          <div class="item">
                            <span>{{ orderItem.price }}</span>
                          </div>
                        </el-col>
                        <el-col
                          :span="2"
                        >
                          <div class="item">
                            <span>{{ orderItem.prodCount }}</span>
                          </div>
                        </el-col>
                        <el-col
                          :span="2"
                        >
                          <div class="item">
                            <span>{{ orderItem.productTotalAmount }}</span>
                          </div>
                        </el-col>
                        <el-col
                          :span="3"
                        >
                          <div class="item">
                            <span>{{ orderItem.actualTotalAmount }}</span>
                          </div>
                        </el-col>
                        <el-col
                          :span="5"
                        >
                          <div class="item">
                            <el-input-number
                              v-model="orderItem.actualTotalAmount"
                              class="el-input-number"
                              :precision="2"
                              :min="0"
                              @change="onSetChageActualTotalAmount(index)"
                            />
                          </div>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col
                  :span="4"
                >
                  <div class="item border">
                    <el-input-number
                      v-model="freightAmount"
                      class="el-input-number"
                      :disabled="dvyType === 2"
                      :precision="2"
                      :min="0"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span v-if="lossAmount !== 0">{{ $t('order.decreaslowance') }}:{{ lossAmount }}{{ $t('admin.dollar') }}</span>
    <template #footer>
      <div>
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('crud.filter.cancelBtn') }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmitProds()"
        >
          {{ $t('crud.filter.submitBtn') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Big from 'big.js'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshOrderAmountUpdate'])

/**
 * 获取数据列表
 */
const visible = ref(false)
const dataList = ref([])
let orderId = 0
const dvyType = ref(1)
let orderNumber = 0
const freightAmount = ref(0)
const lossAmount = ref(0)
const dataListLoading = ref(false)
const init = order => {
  const orderInfo = Object.assign({}, order)
  visible.value = true
  dataListLoading.value = true
  dataList.value = orderInfo.orderItems
  orderId = orderInfo.orderId
  orderNumber = orderInfo.orderNumber
  dvyType.value = orderInfo.dvyType
  freightAmount.value = orderInfo.freightAmount
  lossAmount.value = 0
  dataList.value.forEach(element => {
    element.chageAmount = 0.0
    element.actualTotalAmount = element.actualTotal
  })
  dataListLoading.value = false
}
/**
 * 减少金额变化时，改变订单金额
 */
const onSetChageActualTotalAmount = index => {
  const item = dataList.value[index]
  if (!item.actualTotalAmount) {
    item.actualTotalAmount = 0
  }
  const actualTotal = new Big(item.actualTotal)
  // 实际金额 = 原实际金额 - 变化金额
  item.chageAmount = actualTotal.minus(item.actualTotalAmount)
}
// /**
//  * 校验金额
//  */
let isTrue = false
let errorInfo = ''

const onCheck = () => {
  isTrue = false
  dataList.value.forEach(element => {
    // 如果金额小于0.01 支付积分大于0则为纯积分支付 此时不进行金额判断
    if (element.actualTotal < 0.01 && element.useScore > 0) {
      return false
    }
    if (element.actualTotalAmount <= 0) {
      isTrue = true
      errorInfo = $t('order.theOraterThan0')
      return true
    }
  })
}
// /**
//  * 确定事件
//  */
const onSubmitProds = () => {
  onCheck()
  if (isTrue.value) {
    onErrorMsg(errorInfo)
    return
  }
  http({
    url: http.adornUrl('/order/order/changeAmount'),
    method: 'put',
    data: http.adornData({
      orderId,
      orderItems: dataList.value,
      orderNumber,
      freightAmount: freightAmount.value
    })
  }).then(() => {
    emit('refreshOrderAmountUpdate')
    visible.value = false
  })
}
const onErrorMsg = message => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}
defineExpose({ init })
</script>

<style scoped lang="scss">

.components-amount-update{
  .el-input-number :deep(.el-input__wrapper){
    margin-bottom: 0;
  }
  .mod-order-orderInfo {
    height: 100%;
    width: 100%;
    font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
      "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #495060;
  }
  :deep(.element.style) {
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }
  :deep(.prods-select-body) {
    height: auto;
    overflow: auto;
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }
  :deep(.mod-order-order .contprod-:last-child) {
    border-bottom: 0;
    border-left: 0;
  }
  .prod-cont.prod-bottom,
  .prod-cont {
    text-align: center;
    border-bottom: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
  }
  .prod-cont .item{
    border-right: 1px solid #dddee1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  .prod-tit {
    padding: 10px;
    background: #f8f8f9;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
  }
  .border {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
